<template>
  <div style="margin: auto; font-size: 14px">
    <el-row style="margin-top: 5px">
      <el-switch
        v-model="flag"
        active-text="开启打卡"
        inactive-text="关闭打卡"
        @change="changeClock"
      >
      </el-switch>
    </el-row>
    <el-row style="margin-top: 5px">
      <el-switch
        v-model="passwordFlag"
        active-text="允许改密"
        inactive-text="不允许改密"
        @change="changPassword"
      >
      </el-switch>
    </el-row>
    <el-row style="font-size: 14px; color: #333; line-height: 60px">
      <span>当前请假限制时长: {{ duration }}（天）</span>
    </el-row>
    <div
      style="text-align: right; font-size: 14px; color: #333; line-height: 60px"
    >
      <span>请假限制时长（天）:</span>
      <el-input
        class="ml-5"
        style="width: 200px"
        placeholder="最大为30天"
        v-model="newDuration"
      ></el-input>
      <el-button class="ml-5" type="primary" @click="confirmDuration"
        >确认</el-button
      >
    </div>
  </div>
</template>
    
    <script>
export default {
  data() {
    return {
      duration: "7",
      flag: true,
      passwordFlag: true,
      newDuration: ""
    };
  },

  methods: {
    changPassword() {
      this.request
        .get("/ClockInfo/changePasswordSys", {
          params: {
            passwordFlag: this.passwordFlag,
          },
        })
        .then((req) => {
          console.log(req);
        });
    },
    confirmDuration() {
      this.request
        .get("/ClockInfo/changeDuration", {
          params: {
            duration: this.newDuration,
          },
        })
        .then((req) => {
          if (req) {
            this.openSuc();
          } else {
            this.openFail();
          }
        });
    },
    changeClock() {
      this.request
        .get("/ClockInfo/changClockSys", {
          params: {
            flag: this.flag,
          },
        })
        .then((req) => {
          console.log(req);
        });
    },
    openFail() {
      this.$notify.error({
        title: "失败",
        message: "设置时长失败",
      });
    },
    openSuc() {
      this.newDuration = "";
      this.$notify.success({
        title: "成功",
        message: "设置时长成功",
      });

    },
    load() {
      this.request.get("/ClockInfo/getSys").then((req) => {
        //赋值打卡权限
        if (req.flag == 1) {
          this.flag = true;
        } else{
          this.flag = false;
        }
        //赋值修改密码权限
        if( req.passwordFlag == 1){
          this.passwordFlag = true;
        }else{
          this.passwordFlag = false;
        }
        //赋值请假时长限制
        this.duration = req.duration;

      });
    },
  },
  created() {
    this.load();
  },
};
</script>
    
<style>
</style>